<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import { envCmdList } from '../utils/project/data'
import managePlugin from '../plugins/managePlugin'

//对外提供的属性
interface Props {
  envFlag?: String
}

const props = withDefaults(defineProps<Props>(), {
  // cardInner: true
})

const pageData = reactive({
  envCmdText: '',
  dialogVisible: false,
  variableFormData: {
    webPath: '',
    devAccount: '',
    devServer: '8.130.43.148',
    testAccount: '',
    testServer: ''
  },
  connectDialog: false,
  serverFormData: {
    serverPath: '',
    account: '',
    password: ''
  }
})

//定义变量
const defineVariable = () => {
  pageData.dialogVisible = true
}

//测试连接服务器
const connectServer = (serverPath) => {
  pageData.serverFormData.serverPath = serverPath
  pageData.connectDialog = true
}

//连接服务器
const connectClick = () => {
  let serverFormData = pageData.serverFormData
  // 1.在本地计算机上生成SSH密钥对： ssh-keygen -t rsa
  // 2.将生成的公钥复制到远程服务器的~/.ssh/authorized_keys文件中 ssh-copy-id user@remote_host
  // 因为复制公钥到服务器的操作是需要后输入密码，这里还是有点问题。
  managePlugin.runCmdRender([])
}

onMounted(() => {
  pageData.envCmdText = envCmdList.dev.map((item) => `> ${item}`).join('\n')
  pageData.envCmdText = envCmdList.test.map((item) => `> ${item}`).join('\n')
})
</script>

<template>
  <div class="add-flag-layout hor-layout">
    <div class="add-env-title ver-layout">
      <div class="env-title-text single-line">{{ envFlag }}环境命令配置:</div>
      <el-button class="use-model-btn" type="info" size="small" @click="useModelText('dev')">
        使用模版
      </el-button>
      <el-button
        class="use-model-btn"
        type="info"
        size="small"
        style="margin-left: 0px"
        @click="defineVariable"
      >
        定义变量
      </el-button>
    </div>
    <el-input
      id="myTextarea"
      class="flag-path-input-view"
      type="textarea"
      :rows="8"
      v-model="pageData.envCmdText"
    ></el-input>
  </div>
  <!--  定义变量  -->
  <el-dialog
    v-model="pageData.dialogVisible"
    center
    title="定义变量"
    width="80%"
    :before-close="handleClose"
  >
    <el-card style="width: 80%; margin: auto">
      <el-form v-model="pageData.variableFormData">
        <el-form-item label="项目路径">
          <el-input placeholder="项目所在的文件夹路径" disabled></el-input>
        </el-form-item>
        <el-form-item prop="" label="项目网站：">
          <el-input
            v-model="pageData.variableFormData.webPath"
            placeholder="定义项目网站"
          ></el-input>
        </el-form-item>
        <el-form-item label="开发服务器：">
          <div class="hor-layout-center" style="width: 100%">
            <el-input
              style="width: 120px; margin-right: 10px"
              placeholder="请输入部署账号"
              v-model="pageData.variableFormData.devAccount"
            ></el-input>
            <el-input
              style="flex: 1"
              v-model="pageData.variableFormData.devServer"
              placeholder="定义开发服务器地址"
            >
              <template #append>
                <el-button
                  type="primary"
                  size="small"
                  @click="connectServer(pageData.variableFormData.devServer)"
                >
                  测试连接
                </el-button>
              </template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="测试服务器：">
          <div class="hor-layout-center" style="width: 100%">
            <el-input
              style="width: 120px; margin-right: 10px"
              placeholder="请输入部署账号"
              v-model="pageData.variableFormData.testAccount"
            ></el-input>
            <el-input
              style="flex: 1"
              v-model="pageData.variableFormData.testServer"
              placeholder="定义测试服务器地址"
            >
              <template #append>
                <el-button
                  type="primary"
                  size="small"
                  @click="connectServer(pageData.variableFormData.testServer)"
                >
                  测试连接
                </el-button>
              </template>
            </el-input>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="pageData.variableFormData = false">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 测试连接服务器 -->
  <el-dialog
    v-model="pageData.connectDialog"
    center
    title="测试连接服务器"
    width="60%"
    :before-close="handleClose"
  >
    <el-card style="width: 80%; margin: auto">
      <el-form v-model="pageData.serverFormData">
        <el-form-item label="服务器地址">
          <el-input v-model="pageData.serverFormData.serverPath" disabled></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="pageData.serverFormData.account"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="pageData.serverFormData.password"></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="connectClick">连接</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="less">
.add-flag-layout {
  .add-env-title {
    margin-right: 10px;

    .env-title-text {
      font-size: 13px;
    }

    .use-model-btn {
      margin-top: 10px;
    }
  }
}
</style>
